<template>
    <div class="content">
        <div class="head">
            <div class="image">
                <p class="name">{{ (detail.studyhallName || '').slice(0, 2) }}</p>
                <div class="room">自习室</div>
            </div>
            <p class="name">{{ detail.studyhallName }}</p>
        </div>
        <div class="notice-info">
            <p class="title">{{ detail.title }}</p>
            <div class="time-view">
                <span class="time">{{ formatTime(detail.createTime) }}</span>
                <span class="view">{{ detail.browseCount || 0 }} 人浏览</span>
            </div>
            <div class="notice-list" v-html="detail.content"></div>
        </div>
    </div>
</template>

<script>
import dayjs from 'dayjs';
export default {
    name: 'detail',
    data() {
        return {
            id: null,
            detail: {},
        };
    },
    onLoad(options) {
        this.id = Number(options.id);
        this.getNoticeDetail();
    },
    methods: {
        getNoticeDetail() {
            this.$Api.study.notice
                .get({
                    id: this.id,
                })
                .then(res => {
                    this.detail = res;
                });
        },
        formatTime(val) {
            return dayjs(val).format('MM月DD日');
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    height: 100vh;
    background: #fff;
    .head {
        padding: 26rpx 40rpx;
        background: #fff;
        border-bottom: 20rpx solid #f6f6f6;
        @include flexBox(flex-start, center);
        .image {
            width: 88rpx;
            height: 88rpx;
            background: #5428ec;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 32rpx;
            .name {
                text-align: center;
                color: #fff;
                font-size: 30rpx;
                padding: 10rpx 0;
            }
            .room {
                background: #e6dfff;
                font-size: 24rpx;
                color: #5428ec;
                padding-left: 6rpx;
            }
        }
        .name {
            font-size: 28rpx;
            color: #2f2f2f;
        }
    }
    .notice-info {
        padding: 44rpx 40rpx;
        .title {
            font-size: 36rpx;
            font-weight: 600;
            color: #2f2f2f;
        }
        .time-view {
            margin-top: 14rpx;
            font-size: 24rpx;
            color: #898989;
            @include flexBox(space-between, center);
        }
        .notice-list {
            margin-top: 40rpx;
            font-size: 28rpx;
            color: #2f2f2f;
            line-height: 40rpx;
        }
    }
}
</style>
